import React, { FC, useContext, useEffect, useState } from 'react';
import { View, Text, Input } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { Form } from 'antd-mobile';
import { LoginContext } from '../../LoginContext';
import { FromRulesType, getRules } from './rules';
import MyInput from './MyInput/MyInput';
import GetCodeBtn from './GetCodeBtn/GetCodeBtn';


export interface IProps extends ICompProps {}
LoginForm.defaultProps = {} as Partial<IProps>;
function LoginForm(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('LoginForm', className);
    const [form] = Form.useForm();
    const { loginForm, setloginForm } = useContext(LoginContext);
    const [rules, setRules] = useState({
        phoneNumber: [],
        code: [],
    });
    useEffect(() => {
        setRules(getRules());
    }, []);

    useEffect(() => {
        setloginForm(form);
        // console.log(loginForm);
    }, [form, setloginForm]);

    return (
        <RootView className={localClassName} style={style}>
            <Form className="form" form={form}>
                <Form.Item className="form_phone" name="phoneNumber" rules={rules.phoneNumber}>
                    <MyInput placeholder="请输入手机号" type="number"></MyInput>
                </Form.Item>
                <Form.Item name="code" rules={rules.code}>
                    <MyInput placeholder="请输入验证码" inputAppendSlot={<GetCodeBtn></GetCodeBtn>}></MyInput>
                </Form.Item>
            </Form>
            <View className="login_tips">未注册的手机号验证后可自动登录</View>
        </RootView>
    );
}
export default React.memo(LoginForm as FC<IProps>);
const RootView = styled(View)`
    &.LoginForm {
        .form {
            --border-inner: 0;
            --border-top: 0;
            --border-bottom: 0;
            .form_phone {
                padding-bottom: 28px;
            }
        }
        .login_tips {
            font-weight: 400;
            color: #808a9d;
            font-size: 24px;
            text-align: center;
            line-height: 60px;
        }
    }
`;
